<!DOCTYPE html>
<html class="index-page">
  <head>
    <title>Cockpit</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <link href="../../static/branding.css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="../manifests.js"></script>
    <script src="../*/po.js"></script>
  </head>
  <body class="pf-m-redhat-font" hidden>
    <div id="main" class="area-ct-layout">
        <nav id="topnav" class="navbar navbar-default navbar-pf navbar-pf-vertical area-ct-navbar" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
              <i class="fa fa-bars" alt="Toggle navigation"></i>
            </button>
            <div class="navbar-brand">
              <div id="index-brand" class="hide-before"></div>
            </div>
          </div>
          <div class="collapse navbar-collapse navbar-collapse-1">
            <ul class="nav navbar-nav navbar-utility">
              <li id="machine-spinner">
                <div class="spinner spinner-md spinner-white">
                </div>
              </li>
              <li class="credential-lock">
                <span>
                  <!-- Display nothing when unprivileged -->
                </span>
                <span data-toggle="tooltip" data-placement="bottom" translate="title"
-                    title="Login has escalated admin privileges" class="navbar-text">
                  <i class="fa fa-unlock-alt"></i>
                  <span translate>Privileged</span>
                </span>
              </li>
              <li id="navbar-oops" hidden>
                <a role="link" tabindex="0"><span class="oops-status" translate="yes">Ooops!</span></a>
              </li>
              <li id="navbar-docs" class=dropdown">
                <a role="link" tabindex="0" id="navbar-docs-dropdown" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="pficon pficon-help"></span>
                  <span translate>Help</span>
                </a>
                <ul id="navbar-docs-items" class="dropdown-menu">
                </ul>
              </li>
              <li class="dropdown">
                <a role="link" tabindex="0" id="navbar-dropdown" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="pficon pficon-user"></span>
                  <span id="content-user-name"></span>
                  <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="display-language-menu">
                    <a role="link" tabindex="0" data-toggle="modal" data-target="#display-language" translate="yes">Display Language</a>
                  </li>
                  <li class="divider display-language-menu"></li>
                  <li>
                    <a role="link" tabindex="0" data-toggle="modal" data-target="#about" translate="yes">About Cockpit</a>
                  </li>
                  <li>
                    <a role="link" tabindex="0" id="active-pages" translate="yes" class="navbar-advanced">Active Pages</a>
                  </li>
                  <li class="divider"></li>
                  <li id="go-account" hidden>
                    <a role="link" tabindex="0" translate="yes">Account Settings</a>
                  </li>
                  <li>
                      <a role="link" tabindex="0" data-toggle="modal" data-target="#credentials-dialog"
                          id="credentials-item" translate="yes">Authentication</a>
                  </li>
                  <li>
                    <a role="link" tabindex="0" id="go-logout" translate="yes">Log Out</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>

        <div class="modal" id="about" tabindex="-1" role="dialog" data-backdrop="static">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" translate="yes">About Cockpit</h4>
              </div>
              <div class="modal-body">
                <div translate="yes">Cockpit is an interactive Linux server admin interface.</div>
                <div><a rel="noopener noreferrer" target="_blank" href="https://cockpit-project.org/" translate>Project website</a></div>
                <div>
                  <span translate="yes">Version</span> <span id="about-version"></span>.
                </div>
                <div><span translate>Licensed under:</span>
                    <a href="https://www.gnu.org/licenses/old-licenses/lgpl-2.1-standalone.html"
                      rel="noopener noreferrer" target="_blank">GNU LGPL version 2.1</a>
                </div>
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" translate>Close</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal" id="troubleshoot-dialog" tabindex="-1" role="dialog"
            data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>

        <div class="modal" id="display-language" tabindex="-1" role="dialog" data-backdrop="static">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" translate="yes">Display Language</h4>
              </div>
              <div class="modal-body">
	        <p translate="yes">Choose the language to be used in the application</p>
                <select id="display-language-list" size="5" data-role="none">
                </select>
              </div>
              <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" translate="yes">Cancel</button>
                <button class="btn btn-primary" id="display-language-select-button" translate="yes">Select</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal" id="session-timeout-dialog" tabindex="-1" role="dialog" data-backdrop="static">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" translate="yes">Session is about to expire</h4>
              </div>
              <div class="modal-body">
                  <p id="timeout-message" />
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" id="keep-session-alive" translate="yes">Continue Session</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal" id="error-popup" tabindex="-1" role="dialog" data-backdrop="static">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="error-popup-title"></h4>
              </div>
              <div class="modal-body">
                <p id="error-popup-message"></p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" translate="yes">Close</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal" id="credentials-dialog" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" translate="yes">Authentication</h4>
                    </div>
                    <div class="modal-body">
                        <table class="listing-ct">
                            <thead class="credential-lock">
                                <tr>
                                    <td translate colspan="2">Password not usable for privileged tasks or to connect to other machines</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td translate colspan="2">Reuse my password for privileged tasks and to connect to other machines</td>
                                    <td class="listing-ct-actions">
                                        <button class="btn btn-default pficon pficon-close credential-clear">
                                        </button>
                                    </td>
                                </tr>
                            </thead>
                            <thead>
                                <tr id="credential-keys">
                                    <td colspan="2" translate>Use the following keys to authenticate against other systems</td>
                                    <td class="listing-ct-actions">
                                        <a role="link" tabindex="0">
                                            <i translate class="pficon pficon-add-circle-o"></i>
                                            <span translate>Add key</span>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="load-custom-key hidden">
                                    <td colspan="3">
                                        <div role="group">
                                            <div id="ssh-file-container"></div>
                                            <button class="btn btn-default" id="ssh-file-add" translate>Add</button>
                                        </div>
                                        <div class="dialog-error help-block"></div>
                                    </td>
                                </tr>
                            </thead>
                        </table>
                        <div class="table-scrollable">
                            <table class="listing-ct credential-listing">
                                <tbody class="ssh-add-key-body open">
                                    <tr class="listing-ct-item listing-ct-head">
                                        <th class="credential-label"></th>
                                        <td></td>
                                        <td class="listing-ct-actions"></td>
                                    </tr>
                                    <tr class="listing-ct-body">
                                        <td colspan="3">
                                            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert">
                                              <div class="pf-c-alert__icon">
                                                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                                              </div>
                                              <h4 class="pf-c-alert__title credential-alert"></h4>
                                            </div>
                                            <div class="credential-unlock">
                                                <dl>
                                                    <dt>
                                                        <label for="add-key-password" translate>Password</label>
                                                    </dt>
                                                    <dd>
                                                        <input class="form-control credential-password"
                                                                autocomplete="off"
                                                                id="add-key-password"
                                                                value="" type="password"/>
                                                    </dd>
                                                    <dt></dt>
                                                    <dd>
                                                        <button class="btn btn-primary"
                                                                translate>Unlock Key</button>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody class="ssh-key-body" hidden>
                                    <tr class="listing-ct-item listing-ct-head">
                                        <th class="credential-label"></th>
                                        <td></td>
                                        <td class="listing-ct-actions"></td>
                                    </tr>
                                    <tr class="listing-ct-panel credential-panel">
                                        <td colspan="3">
                                            <ul class="nav nav-tabs nav-tabs-pf">
                                                <li class="active"><a href="#" translate="yes">Details</a></li>
                                                <li><a href="#" translate="yes">Public Key</a></li>
                                                <li><a href="#" translate="yes">Password</a></li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="listing-ct-body">
                                        <td colspan="3">
                                            <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert">
                                              <div class="pf-c-alert__icon">
                                                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                                              </div>
                                              <h4 class="pf-c-alert__title credential-alert"></h4>
                                            </div>
                                            <div class="credential-unlock">
                                                <dl>
                                                    <dt>
                                                        <label for="ssh-key-password" translate="yes">Password</label>
                                                    </dt>
                                                    <dd>
                                                        <input class="form-control credential-password"
                                                                autocomplete="off"
                                                                id="ssh-key-password"
                                                                value="" type="password"/>
                                                    </dd>
                                                    <dt></dt>
                                                    <dd>
                                                        <button class="btn btn-primary"
                                                                translate>Unlock Key</button>
                                                    </dd>
                                                </dl>
                                            </div>
                                            <div class="credential-tab credential-panel">
                                                <dl>
                                                    <dt>
                                                        <label translate>Comment</label>
                                                    </dt>
                                                    <dd class="credential-comment"></dd>
                                                    <dt>
                                                        <label translate>Type</label>
                                                    </dt>
                                                    <dd class="credential-type"></dd>
                                                    <dt>
                                                        <label translate>Fingerprint</label>
                                                    </dt>
                                                    <dd class="credential-fingerprint"></dd>
                                                </dl>
                                            </div>
                                            <div class="credential-tab credential-panel" hidden>
                                                <textarea class="credential-data form-control" rows="4" readonly>
                                                </textarea>
                                            </div>
                                            <div class="credential-tab credential-panel" hidden>
                                                <dl>
                                                    <dt>
                                                        <label for="credential-old-passwd" translate="yes">Old Password</label>
                                                    </dt>
                                                    <dd>
                                                        <input class="form-control credential-old"
                                                            autocomplete="off"
                                                            id="credential-old-passwd"
                                                            value="" type="password"/>
                                                    </dd>
                                                    <dt>
                                                        <label for="credential-new-passwd" translate="yes">New Password</label>
                                                    </dt>
                                                    <dd>
                                                        <input class="form-control credential-new"
                                                            autocomplete="off"
                                                            id="credential-new-passwd"
                                                            value="" type="password"/>
                                                    </dd>
                                                    <dt>
                                                        <label for="new-passwd-confirm" translate="yes">Confirm</label>
                                                    </dt>
                                                    <dd>
                                                        <input class="form-control credential-two"
                                                            autocomplete="off"
                                                            id="new-passwd-confirm"
                                                            value="" type="password"/>
                                                    </dd>
                                                    <dt>
                                                        <a tabindex="0" role="button" data-toggle="popover"
                                                            data-trigger="focus" data-placement="top"
                                                            data-content="Tip: Make your key password match your login password to automatically authenticate against other systems." translate="data-content">
                                                            <span class="fa fa-lg fa-info-circle"></span>
                                                        </a>
                                                    </dt>
                                                    <dd>
                                                        <button class="credential-change btn btn-primary"
                                                            translate="yes">Change Password</button>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal" translate="yes">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="area-ct-body">
            <div class="nav-sidebar-wrap expanded" id="multi-dashboard">
                <nav class="nav-sidebar nav-pf-vertical">
                    <ul id="main-navbar" class="main-navbar list-group">
                        <li id="host-nav-item" class="list-group-item dashboard-link has-menu">
                            <a role="link" tabindex="0" id="host-nav-link">
                                <span class="fa pficon-container-node"></span>
                                <span class="list-group-item-value"></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div id="host-nav" class="area-ct-subnav">
                <div id="machine-dropdown" class="nav-item-pf-header machine-dropdown">
                    <a role="link" tabindex="0" id="machine-link" class="dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" role="button" aria-expanded="false">
                      <img src="../shell/images/server-small.png" id="machine-avatar" role="presentation" alt="" class="machine-avatar single-dashboard">
                      <span></span>
                       <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
                    </a>

                    <div class="dropdown-menu">
                        <div class="form-group has-feedback">
                            <input id="find-machine" class="form-control" type="search">
                            <span class="fa fa-search form-control-feedback"></span>
                        </div>
                        <ul role="menu" aria-labelledby="machine-link">
                        </ul>
                    </div>
                </div>
                <div class="has-feedback search" id="menu-search">
                    <input id="filter-menus" class="form-control" type="search" placeholder="Search"
                        translate="placeholder aria-label" aria-label="Search">
                    <span class="fa fa-search form-control-feedback"></span>
                </div>

                <nav id="host-apps" class="host-apps">
                    <ul class="list-group" id="sidebar-menu">
                    </ul>

                    <ul class="list-group" id="sidebar-tools">
                    </ul>
                </nav>
            </div>

          <div id="content" role="main" class="area-ct-content">
            <!-- This is where the iframes appear -->
            <div class="curtains-ct blank-slate-pf" role="alertdialog" aria-labelledby="machine-error-heading" aria-describedby="machine-error-desc" hidden>
              <div class="blank-slate-pf-icon">
                <div class="spinner spinner-lg" hidden></div>
                <i class="fa fa-exclamation-circle"></i>
              </div>
              <h1 id="machine-error-heading"></h1>
              <p id="machine-error-desc"></p>
              <div class="blank-slate-pf-main-action">
                <button id="machine-reconnect" class="btn btn-primary btn-lg" translate="yes">Reconnect</button>
                <button id="machine-troubleshoot" class="btn btn-primary btn-lg" translate="yes">Troubleshoot</button>
              </div>
            </div>

          </div>
        </div>

    </div>

    <div id="early-failure" class="blank-slate-pf" role="alertdialog" hidden>
      <div class="blank-slate-pf-icon">
        <i class="fa fa-exclamation-circle"></i>
      </div>
      <h1 translate>Connection failed</h1>
      <p>
        <span translate>There was an unexpected error while connecting to the machine.</span><br>
        <span translate>Messages related to the failure might be found in the journal:</span><br>
        <code>journalctl -u cockpit</code>
      </p>
      <p id="safari-cert-help" hidden>
        <span translate>Safari users need to import and trust the certificate of the self-signing CA:</span><br>
        <a download>ca.cer</a>
      </p>
    </div>

    <script src="index.js"></script>
  </body>
</html>
